<template>
  <div class="radio-group">
    <span class="title" v-if="title">{{title}}</span>
    <div class="tab-group">
      <span @click="handleTabChange(tab.value,$event)" class="tab" v-for="tab in tabs"
            :class="{'current':current === tab.value}">{{tab.title}}
        <i v-if="current === tab.value" class="iconfont icon-check"></i>
      </span>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        current_tab: 'share'
      }
    },
    props: {
      title: {
        type: String,
        default: ''
      },
      tabs: {
        type: Array,
        default: []
      },
      current: {
        type: String,
        default: ''
      }
    },
    methods: {
      handleTabChange(value, event) {
        if (!event._constructed) {
          return
        }
        this.$emit('checkTab', value)
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss">
  @import "~common/scss/const";

  .radio-group {
    margin: 0 auto 0px;
    width: 95%;
    padding-top: 28px;
    padding-bottom: 0px;
    position: relative;
    box-sizing: border-box;
    height: 70px;
    .title {
      position: absolute;
      left: 0;
      top: 5px;
      line-height: 20px;
      font-size: $font-size-medium;
      color: #666666;
    }
    .tab-group {
      display: flex;
      height: 26px;
      align-items: center;
      margin-top: 12px;
      span {
        display: inline-block;
        flex: 1;
        margin-right: 10px;
        text-align: center;
        line-height: 24px;
        font-size: $font-size-small;
        box-sizing: border-box;
        background-color: #fefefe;
        border: 1px solid #eeeeee;
        color: #666666;
        border-radius: 1px;
        cursor: pointer;
        position: relative;
        i {
          display: inline-block;
          font-size: 10px;
          position: absolute;
          right: 2px;
          bottom: 2px;
          height: 10px;
          line-height: 10px;
        }
        &:last-child {
          margin-right: 0;
        }
        &.current {
          border-color: #39f;
          color: #39f;
          font-weight: bold;
        }
      }
    }
  }
</style>
